<template>
  <div class="digital-flop-wrap" :style="containerStyle">
    <div class="digital-flop__title" :style="titleStyle">{{ flopData.label }}</div>
    <div class="digital-flop__divider" :style="dividerStyle"></div>
    <div class="digital-flop__body">
      <template v-for="(num,i) in numberStr">
        <flop-item :number="num" v-bind="config.flop"></flop-item>
        <div :style="separatorStyle" v-if="((numberStr.length - (i+1)) % 3 === 0) && (numberStr.length - (i+1)) !==0"
             class="separator-block">
          ‚
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import FlopItem from './FlopItem'

export default {
  name: 'DigitalFlop',
  props: {
    option: {
      type: Object,
      default: () => ({
        tableField: [
          /*
            {
              key: '',
              fieldName: '',
              fieldDescribe: ''
            }
          */
        ],
        tableData: [],
        config: {},
        style: {}
      })
    }
  },
  data() {
    return {
      defaultConfig: {
        container: {},
        flop: {
          width: 30,
          height: 40,
          fontSize: 28,
          color: '#ffffff'
        },
        space: {
          position: 8
        }

      },
      defaultStyle: {
        container: {
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center'
        },
        label: {
          fontSize: '24px',
          color: '#606266'
        },
        space: {},
        flop: {}
      }
    }
  },
  computed: {
    // 列表数据
    tableData: function() {
      let tableData = this.option?.tableData
      if (tableData && tableData instanceof Array && tableData.length) {
        return tableData[0]
      } else {
        return {}
      }
    },
    // 翻牌器数据
    flopData: function() {
      let data = {
        label: '',
        value: ''
      }
      let tableField = this.option?.tableField
      if (tableField && tableField instanceof Array && tableField.length) {
        let field = tableField[0]
        data.label = field.fieldDescribe
        if (this.tableData.hasOwnProperty(field.fieldName)) {
          data.value = this.tableData[field.fieldName] === undefined ? '' : this.tableData[field.fieldName]
        }
      }
      return data
    },
    // 翻牌器配置
    config: function() {
      return this.option?.config || this.defaultConfig
    },
    style: function() {
      return this.option?.style || this.defaultStyle
    },
    // 翻牌器数值
    numberStr: function() {
      if (typeof this.flopData.value === 'number') {
        return this.flopData.value.toString()
      } else {
        return this.flopData.value
      }
    },
    // 分隔符样式
    separatorStyle: function() {
      return {
        width: `${this.config.flop.width / 2}px`,
        height: `${this.config.flop.height}px`,
        fontSize: `${this.config.flop.fontSize}px`
      }
    },
    containerStyle: function() {
      return {
        ...this.style.container
      }
    },
    titleStyle: function() {
      return {
        ...this.style.label
      }
    },
    dividerStyle: function() {
      if (this.style.container?.flexDirection === 'column') {
        return {
          width: '100%',
          height: `${this.config.space.position}px`
        }
      } else {
        return {
          height: '100%',
          width: `${this.config.space.position}px`
        }
      }

    }

  },
  components: {
    FlopItem
  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
.digital-flop-wrap {
  display: flex;


  .digital-flop__title {

  }

  .digital-flop__divider {

  }

  .digital-flop__body {
    display: flex;

    .separator-block {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      color: #303133;
    }
  }
}
</style>
